<template>
  <div class="radio-record">
    <template v-if="status == 0">
      <el-button type="primary" icon="el-icon-microphone" v-if="!recorded" @click="handleStartRecord" key="start">开始录制
      </el-button>
      <el-button type="success" icon="el-icon-video-play" v-if="recorded" @click="handlePlay" key="play"
        :disabled="playing">{{
            playLabel
        }}
      </el-button>
      <el-button type="warning" icon="el-icon-refresh-left" v-if="recorded" @click="handleRepeatRecord" key="repeat">
        重新录制</el-button>
    </template>
    <template v-if="status == 1">
      <el-button type="danger" icon="el-icon-video-pause" @click="handleStopRecord" key="stop">停止录制</el-button>
    </template>
  </div>
</template>

<script>
export default {
  name: 'RadioRecord',
  data() {
    return {
      status: 0,
      recorded: false,
      playing: false
    }
  },
  computed: {
    playLabel() {
      return this.playing ? '播放中...' : '试听'
    }
  },
  methods: {
    handleStartRecord() {
      this.status = 1;
    },
    handleStopRecord() {
      this.status = 0;
      this.recorded = true;
    },
    handleRepeatRecord() {
      this.recorded = false;
    },
    handlePlay() {
      this.playing = true;
      setTimeout(() => {
        this.playing = false;
      }, 3000)
    },
  }
}
</script>

<style lang="scss" scoped>

</style>